<template>
  <div id="ordersManage">
    <!-- 搜索框-->
    <orders-search
      :show-search="showSearch"
      @handle-query="handleQuery($event)"
      @handle-reset="handleQuery({}, true)"
    />
    <!-- 列表 -->
    <el-card shadow="never">
      <!-- 表格工具栏 -->
      <div class="toolbar">
        <!-- 左侧工具栏 -->
        <div>
          <el-space :size="25">
            <el-text tag="b">待处理事项：</el-text>
            <el-badge :show-zero="false" :value="0">
              <el-button size="small" type="primary" disabled
                >地址修改
              </el-button>
            </el-badge>
            <el-badge :show-zero="false" :value="0">
              <el-button size="small" type="success" disabled
                >退款申请
              </el-button>
            </el-badge>
          </el-space>
        </div>
        <!-- 右侧工具栏 -->
        <div>
          <el-button
            :icon="Refresh"
            circle
            title="刷新"
            @click="handleQuery({}, true)"
          />
          <el-popover placement="bottom" trigger="click">
            <template #reference>
              <el-button :icon="Operation" circle title="筛选列" />
            </template>
            <el-scrollbar max-height="350px">
              <template v-for="col in cols" :key="col.props">
                <el-checkbox v-model="col.show" :label="col.label" />
              </template>
            </el-scrollbar>
          </el-popover>
          <el-button
            :icon="Search"
            circle
            title="搜索"
            @click="handleSearchShow"
          />
        </div>
      </div>
      <!-- 列表 -->
      <el-table
        :data="tableData"
        :expand-row-keys="selectRow"
        :header-cell-style="{ background: '#79bbff', color: 'white' }"
        border
        current-row-key="id"
        highlight-current-row
        row-key="id"
        @expand-change="handleExpandChange"
      >
        <el-table-column align="center" type="expand" width="50">
          <template #default="scope">
            <el-space>
              <el-descriptions
                border
                direction="vertical"
                style="margin: 0 10px"
              >
                <el-descriptions-item align="center" label="收货信息">
                  {{ concatAddress(scope.row.address) }}
                </el-descriptions-item>
                <el-descriptions-item
                  align="center"
                  label="数量合计"
                  label-width="300"
                >
                  {{ getGoodsNum(scope.row.ordersItemVOS) }}件
                </el-descriptions-item>
              </el-descriptions>
              <el-button
                v-if="scope.row.status === OrdersStatusEnum.DFH"
                type="primary"
                >发货
              </el-button>
            </el-space>

            <el-row :gutter="12" style="margin: 10px 0">
              <el-col
                v-for="ordersItem in scope.row.ordersItemVOS as OrdersItemVO[]"
                :key="ordersItem.goodsSpecName"
                :span="12"
              >
                <el-row style="margin: 5px 0">
                  <el-col :span="6">
                    <el-image
                      :preview-src-list="[ordersItem.goodsImage || Img]"
                      :src="ordersItem.goodsImage || Img"
                      fit="contain"
                      preview-teleported
                      style="
                        width: 80px;
                        height: 80px;
                        border-radius: 5px;
                        display: block;
                        margin: 0 auto;
                      "
                    />
                  </el-col>
                  <el-col :span="17" style="padding: 5px">
                    <el-space fill size="small">
                      <el-text :line-clamp="1" size="large" tag="b">
                        {{ ordersItem.goodsName }}
                      </el-text>
                      <el-text :line-clamp="1" size="small">
                        {{ ordersItem.goodsSpecName }}
                      </el-text>
                      <el-text>
                        <el-text size="small"
                          >数量x{{ ordersItem.goodsNum }}
                        </el-text>
                      </el-text>
                    </el-space>
                  </el-col>
                </el-row>
              </el-col>
            </el-row>
          </template>
        </el-table-column>
        <el-table-column
          v-if="handleColShow('id')"
          align="center"
          label="订单编号"
          prop="id"
          width="250"
        >
          <template #default="scope">
            {{ scope.row.id || "无" }}
            <copy-button :value="scope.row.id || '无'" :index="scope.row.id" />
          </template>
        </el-table-column>
        <el-table-column
          v-if="handleColShow('status')"
          align="center"
          label="订单状态"
          prop="status"
          show-overflow-tooltip
        >
          <template #default="scope">
            <el-text type="danger"
              >{{ getOrdersStatusLabel(scope.row.status) }}
            </el-text>
          </template>
        </el-table-column>
        <el-table-column
          v-if="handleColShow('payPrice')"
          align="center"
          label="支付金额"
          prop="payPrice"
          show-overflow-tooltip
        />
        <el-table-column
          v-if="handleColShow('payType')"
          align="center"
          label="支付方式"
          prop="payType"
          show-overflow-tooltip
        >
          <template #default="scope">
            <el-tag :type="scope.row.payType === 1 ? 'primary' : 'info'"
              >{{ scope.row.payType === 1 ? "支付宝" : "其他" }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column
          v-if="handleColShow('createTime')"
          align="center"
          label="下单时间"
          prop="createTime"
          show-overflow-tooltip
          width="200"
        />
        <el-table-column
          v-if="handleColShow('payTime')"
          align="center"
          label="支付时间"
          prop="payTime"
          show-overflow-tooltip
          width="200"
        />
      </el-table>

      <!-- 分页 -->
      <el-scrollbar>
        <div class="pagination">
          <el-pagination
            :page-size="queryData.pageSize"
            :page-sizes="[10, 20, 30, 50]"
            :total="parseInt(total)"
            background
            layout="prev,pager,next,jumper,total,sizes"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          />
        </div>
      </el-scrollbar>
    </el-card>
  </div>
</template>
<script lang="ts" setup>
import { Operation, Refresh, Search } from "@element-plus/icons-vue";
import { ref } from "vue";
import {
  AddressVO,
  NoticeQueryParams,
  NoticeVO,
  OrdersControllerService,
  OrdersItemVO,
} from "@/api";
import OrdersSearch from "@/views/back/system/orders/components/OrdersSearch.vue";
import CopyButton from "@/components/CopyButton.vue";
import Img from "@/assets/logo.png";
import {
  getOrdersStatusLabel,
  OrdersStatusEnum,
} from "@/types/OrdersStatusEnum";

/**
 * 查询搜索开始
 */
const queryInit = {
  pageNum: 1,
  pageSize: 10,
  beginTime: "",
  endTime: "",
  keyword: "",
};
//查询数据对象
const queryData = ref({ ...queryInit });

//查询事件
function handleQuery(query: NoticeQueryParams, reset?: boolean) {
  //处理时间函数
  if (query?.createTime) {
    queryData.value.beginTime = query.createTime[0];
    queryData.value.endTime = query.createTime[1];
  }
  if (query?.keyword) {
    queryData.value.keyword = query.keyword;
  }
  //重置页码
  if (reset) {
    queryData.value = { ...queryInit };
  }
  let data = queryData.value;
  OrdersControllerService.getOrdersPageByBusinessIdUsingGet(
    data.pageNum,
    data.pageSize
  ).then((res) => {
    const { data } = res;
    total.value = data?.total || 0;
    tableData.value = data?.rows || [];
  });
}

// 页面创建时调用
handleQuery({});
//查询的数据
const total = ref<number>(0); //总条数
const tableData = ref<NoticeVO[]>([]); // 数据集合

//页面显示条数变化
function handleSizeChange(value: number) {
  queryData.value.pageSize = value;
  handleQuery({});
}

//页码变化
function handleCurrentChange(value: number) {
  queryData.value.pageNum = value;
  handleQuery({});
}

//获取收货信息
function concatAddress(data: AddressVO) {
  return `${data.contact}，${data.phone}，${data.areaAddress}${data.detailAddress}`;
}

/**
 * 查询数据结束
 */

// const rules = {
//   title: [{ required: true, message: "请输入标题", trigger: "change" }],
//   toNum: [{ required: true, message: "请选择接收端", trigger: "blur" }],
//   content: [{ required: true, message: "请输入内容", trigger: "blur" }],
// }; // 表单规则

/**
 * 工具栏开始
 *
 */
// 6、筛选列开始
//列数据
const cols = ref([
  {
    label: "订单编号",
    props: "id",
    show: true,
  },
  {
    label: "订单状态",
    props: "status",
    show: true,
  },
  {
    label: "支付金额",
    props: "payPrice",
    show: true,
  },
  {
    label: "支付类型",
    props: "payType",
    show: true,
  },
  {
    label: "创建时间",
    props: "createTime",
    show: true,
  },
  {
    label: "支付时间",
    props: "payTime",
    show: true,
  },
]);

//列展示处理
function handleColShow(prop: string) {
  return cols.value.filter((col) => col.props === prop)[0].show;
}

// 6、筛选列结束
// 7、搜索展示开始
//搜索展示处理
const showSearch = ref(true);

function handleSearchShow() {
  showSearch.value = !showSearch.value;
}

const selectRow = ref<string[]>([]);

//展开行处理
function handleExpandChange(row: any) {
  selectRow.value[0] = row.id;
}

// 7、搜索展示结束
// 获取数量
function getGoodsNum(row: OrdersItemVO[]) {
  let num = 0;
  row.forEach((ordersItem) => (num += ordersItem.goodsNum!));
  return num;
}
</script>

<style lang="scss" scoped>
#ordersManage {
  .toolbar {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    margin-bottom: 10px;
  }

  .pagination {
    margin-top: 12px;
  }
}
</style>
